<template>
  <div class="ht-search-form" style="margin-top: 6px">
    <p class="ht-form-title">移库信息</p>
    <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">移库单号</div>
        <div class="ht-de-content">
          {{ selectRow.orderNo }}
        </div>
      </el-col>
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">关联并库计划</div>
        <div class="ht-de-content">
          {{ selectRow.transOrderNo }}
        </div>
      </el-col>

      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">申请班组</div>
        <div class="ht-de-content">
          <ht-select-org
            :readonly="true"
            v-if="selectRow.applyOrganizationUnitId"
            :value="selectRow.applyOrganizationUnitId"
          ></ht-select-org>
        </div>
      </el-col>

      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">申请人</div>
        <div class="ht-de-content">
          <ht-select-user
            :readonly="true"
            v-if="selectRow.creatorId"
            :value="selectRow.creatorId"
          ></ht-select-user>
        </div>
      </el-col>
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">创建时间</div>
        <div class="ht-de-content">
          {{ selectRow.creationTime?.replace('T', ' ').slice(0, 19) }}
        </div>
      </el-col>
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">移库状态</div>
        <div class="ht-de-content">
          <Status :color="corlor[selectRow?.status]?.corlor">
            <span>{{ corlor[selectRow?.status]?.label }}</span>
          </Status>
        </div>
      </el-col>
    </el-row>
    <!-- <p class="ht-form-title">移库酒品</p>
    <el-row :gutter="24" class="ht-form-row" style="margin-top: 16px">
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">酒品名称</div>
        <div class="ht-de-content">
          {{ moveData?.wineBreedName }}
        </div>
      </el-col>
      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">酒品代码</div>
        <div class="ht-de-content">
          {{ moveData?.wineBreedCode }}
        </div>
      </el-col>

      <el-col class="ht-de-item" :span="4">
        <div class="ht-de-title">生产年月</div>
        <div class="ht-de-content">
          {{ moveData?.manuDate?.slice(0, 10) }}
        </div>
      </el-col>
    </el-row> -->
    <p class="ht-form-title">移库明细</p>

    <ht-table
      class="ht-table-no-border"
      :data="selectRow.containers"
      style="width: 100%; margin-top: 12px"
      border
      pageStyle="text-align:right"
      :hide-page="true"
      :hide-order="true"
      highlight-current-row
      :columns="columns"
    >
      <template slot="manuDate" slot-scope="{ row }">
        {{ row.manuDate?.slice(0, 10) }}
      </template>
      <template slot="containerType" slot-scope="{ row }">
        {{ row.containerType == 1 ? '移入' : '移出' }}
      </template>

      <template slot="levelBegin" slot-scope="{ row }">
        <span v-if="row.levelBegin">{{ row.levelBegin + ' m' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="levelEnd" slot-scope="{ row }">
        <span v-if="row.levelEnd">{{ row.levelEnd + ' m' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="levelValue" slot-scope="{ row }">
        <span v-if="row.levelValue">{{ row.levelValue + ' m' }}</span>
        <span v-else>--</span>
      </template>

      <template slot="weight" slot-scope="{ row }">
        <span v-if="row.weight">{{ row.weight + ' T' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="standardWeight" slot-scope="{ row }">
        <span v-if="row.standardWeight">{{ row.standardWeight + ' T' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="dischargeBegin" slot-scope="{ row }">
        <span v-if="row.dischargeBegin">{{ row.dischargeBegin + ' Pa' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="dischargeEnd" slot-scope="{ row }">
        <span v-if="row.dischargeEnd">{{ row.dischargeEnd + ' Pa' }}</span>
        <span v-else>--</span>
      </template>
      <template slot="dischargeValue" slot-scope="{ row }">
        <span v-if="row.dischargeValue">{{ row.dischargeValue + ' Pa' }}</span>
        <span v-else>--</span>
      </template>
    </ht-table>
  </div>
</template>
<script lang="ts">
import { Column } from 'htui-yllkbz/src/packages/type';
import Status from '@/components/status.vue';
import { Component, Prop, Vue } from 'vue-property-decorator';
interface State {
  /** 数据状态 */
  loading: boolean;
  dataSource: any;
}
@Component({
  components: {
    Status,
  },
})
export default class Index extends Vue {
  @Prop() selectRow!: any;
  /** 数据 */
  state: State = {
    loading: false,
    dataSource: [],
  };
  /** 生命周期 */

  initData() {
    this.state.dataSource = this.selectRow.containers;
  }
  /** 方法 */
  // 得到颜色类型
  getCorlor(val: number) {
    const arr = [
      {
        value: 1,
        label: '待移出验度',
        corlor: '#E2B236',
      },
      {
        value: 2,
        label: '待执行开阀',
        corlor: '#E2B236',
      },
      {
        value: 3,
        label: '待验度或开阀',
        corlor: '#E2B236',
      },
      {
        value: 4,
        label: '移库执行中',
        corlor: '#4ECC7A',
      },
      {
        value: 8,
        label: '待执行关阀',
        corlor: '#E2B236',
      },
      {
        value: 16,
        label: '待移入验度',
        corlor: '#E2B236',
      },
      {
        value: 32,
        label: '已完成移库',
        corlor: '#CACECB',
      },
    ];

    return arr.find((item: any) => item.value == val)?.corlor;
  }
  /** 监听 */
  /** 计算属性 */

  // 获取移库的数据
  get moveData() {
    return this.selectRow?.containers?.find(
      (item: any) => item.containerTypeName == '移出'
    );
  }

  get columns(): Column[] {
    return [
      //
      { key: 'type', title: '类型' },
      { key: 'Factory', title: '厂区' },
      { key: 'Warehouse', title: '酒库' },
      { key: 'number', title: '容器' },
      { key: 'StartValue', title: '移出期初值' },
      { key: 'EndValue', title: '移出期末值' },
      { key: 'StartTime', title: '开始时间' },
      { key: 'EndTime', title: '结束时间' },
      { key: 'Handler', title: '经手人' },
      { key: 'Checker', title: '确认人' },
    ];
  }

  get corlor() {
    return [
      {
        value: 0,
        label: '待开阀',
        corlor: '#E2B236',
      },
      {
        value: 1,
        label: '待移库',
        corlor: '#E2B236',
      },
      {
        value: 2,
        label: '移库中',
        corlor: '#4ECC7A',
      },
      {
        value: 3,
        label: '待关阀',
        corlor: '#E2B236',
      },
      {
        value: 4,
        label: '待完成验度',
        corlor: '#E2B236',
      },

      {
        value: 5,
        label: '已完成移库',
        corlor: '#CACECB',
      },
    ];
  }
  /** 计算属性 */
}
</script>
<style lang="scss" scoped></style>
